<template>
  <div>
    <!-- 我的工单 -->
    <div class="surfaceHer">
      <ul>
        <li v-for="(item, index) in surfaceHer" :key="index">
          {{ item }}
        </li>
      </ul>
      <div
        v-for="(item, index) in surfaceList"
        :key="index"
        :class="index % 2 == 0 ? 'ou' : ''"
        @click="Tolistdetails(item.id,item.status)"
      >
        <span>{{ item.number }}</span>
        <span>{{ item.title }}</span>
        <span>{{ item.status == 0 ? '待接单' : (item.status == 1 ? '待确认' : ( item.status == 2 ? '待支付' : ( item.status == 3 ? '待服务' : ( item.status == 4 ? '进行中' : ( item.status == 5 ? '已完成' : '已取消' ) ) ) ) ) }}</span>
        <span>{{ item.add_time }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      surfaceHer: ["工单编号", "服务项目", "状态", "预约时间"],
      surfaceList: [],
    };
  },
  onShow() {
    let mobile =  wx.getStorageSync("mobile")
    this.request({
      url: this.baseUrl + '/api/edit/waterUser',
      data:{
        type: 1,
        mobile: mobile
      },
      method: 'POST',
    })
    .then(result=>{
			// console.log(result)
			if(result.status == 200){
        this.user = result.data.user_login
        this.request({
          url: this.baseUrl + '/api/wechatapp/myWorkList',
          data:{
            water_user_id: this.user.id
          },
          method: 'GET',
        })
        .then(result=>{
          if(result.status == 200){
            this.surfaceList = result.data.list.data
            // console.log(this.surfaceList)
          } else {
            return false
          }
        })
			} else {
        return false
			}
    })
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    // 跳转工单详情
    Tolistdetails(id,status) {
      wx.navigateTo({
        url: "../listdetails/main?id=" + id + '&status=' + status
      })
    },
  },
  components: {},
};
</script>

<style scoped >
.surfaceHer ul {
  display: flex;
  background: #1677ff;
}
.surfaceHer li {
  width: 25%;
  text-align: center;
  padding: 30rpx 20rpx;
  color: #dddddd;
}
.ou {
  background: #ffffff;
}
.surfaceHer > div {
  display: flex;
}
.surfaceHer > div > span {
  width: 25%;
  padding: 30rpx 0;
  text-align: center;
  font-size: 24rpx;
}
</style>
